import React, { Component } from "react";
import { Icon } from "react-vant";
import { ActionBar } from "react-vant";
import { getCarDepart } from "../api/index";

export default class DepartDetail extends Component {
  state = {
    DetailData: {},
  };
  componentDidMount() {
    console.log(this.props);
    this.setState({
      DetailData: this.props.location.state.data,
    });
  }
  //返回上一级
  goBack() {
    this.props.history.go(-1);
  }
  //跳转到购物车页面
  goCar() {
    this.props.history.push("/car");
  }
  //加入购物车
  AddShop(item) {
    getCarDepart({
      img: item.img,
      title: item.title,
      info: item.info,
      price: item.price,
      num: item.num,
      id: item.id,
    }).then((res) => {
      console.log(res);
    });
  }
  render() {
    const { DetailData } = this.state;
    return (
      <div className="departDetail">
        <div className="header">
          <Icon
            name="arrow-left"
            size="20"
            onClick={() => {
              this.goBack();
            }}
          />
          <div>商品详情</div>
          <span></span>
        </div>
        <img src={DetailData.img} alt="" />
        <div className="price">
          <p>{DetailData.title}</p>
          <p>￥{DetailData.price}</p>
        </div>
        <p className="info">{DetailData.info}</p>
        <ActionBar>
          <ActionBar.Icon icon="chat-o" color="#ee0a24" text="客服" />
          <ActionBar.Icon
            icon="cart-o"
            text="购物车"
            onClick={() => {
              this.goCar();
            }}
          />
          <ActionBar.Icon icon="star" color="#ff5000" text="店铺" />
          <ActionBar.Button
            type="warning"
            text="加入购物车"
            onClick={() => this.AddShop(DetailData)}
          />
          <ActionBar.Button type="danger" text="立即购买" />
        </ActionBar>
      </div>
    );
  }
}
